<template>
    <div class="ordering">
        <div>
        <el-page-header>
            <template #breadcrumb>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: 'adminhome' }">
                        管理员主页
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>培养方案管理</el-breadcrumb-item>
                </el-breadcrumb>
            </template>
        </el-page-header>
    </div><br/>
        <div class="heading">培养方案</div>
        <el-divider />
        <div>
            <el-table :data="tableData" style="width: 100%" height="350">
                <el-table-column fixed prop="planId" label="培养方案编号" min-width="100" />
                <el-table-column prop="courseId" label="课程编号" min-width="100" />
                <el-table-column prop="courseName" label="课程名" min-width="100" />
                <el-table-column prop="startDate" label="学期" min-width="100" />
                <el-table-column prop="majorName" label="专业" min-width="100" />
                <el-table-column prop="enrolDate" label="入学年份" min-width="100" :formatter="formatDate" />
            </el-table>
            <div>
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="培养方案文件上传" name="first">
                        <el-upload class="upload-demo" drag action="http://localhost:8080/excel/import_TrainPlan"
                            :show-file-list="false" multiple :on-success="uploadFileHandler"
                            :on-error="uploadFileErrorHandler" :on-progress="uploadFileOnProgressHandler" :data=token>
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <!--     <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
                        </el-upload>
                    </el-tab-pane>
                    <el-tab-pane label="上传提示" name="second">
                        <el-text class="mx-1" size="large">
                            1. 文件的上传应选择excel表格形式，表格列应与要求中一致；
                        </el-text>
                        <br />
                        <el-text class="mx-1" size="large">
                            2. 表格上传一次最多上传一个文件，后文件会覆盖前文件的内容，请谨慎上传；
                        </el-text>
                        <br />
                        <el-text class="mx-1" size="large">
                            3. 请认真核对表格信息后上传，上传后只能覆盖不能修改信息。
                        </el-text>
                    </el-tab-pane>
                    <el-tab-pane label="常见问题" name="third">
                        <el-text class="mx-1" size="large">
                            1. 系统加载缓慢，上传后展示列表不显示信息。
                            解决方案： 请尽快联系维护员。
                        </el-text>
                        <br />
                        <el-text class="mx-1" size="large">
                            2. 文件上传失败的可能性
                            文件过大或者文件的格式不对。
                        </el-text>
                    </el-tab-pane>
                    <el-tab-pane label="系统维护员联系" name="fourth">
                        <el-descriptions title="维护员">
                            <el-descriptions-item label="姓名：">殷凡卓</el-descriptions-item>
                            <el-descriptions-item label="联系电话：">18100000000</el-descriptions-item>
                            <el-descriptions-item label="办公地址：">中原校区 基础实验楼102</el-descriptions-item>
                        </el-descriptions>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import requests from '@/api/ajax.js'
import { genFileId } from 'element-plus'



const token = ref({
    token: ''
});
token.value.token = localStorage.getItem('user') // 替换为自己的 token
//console.log("++"+token.value);
// token.value = 'Bearer'+ token .value;
console.log("++" + token.value);

/* const url1 = "http://localhost:8080/excel/import_PracticeCourse/test?token=" + token.value
console.log("++" + url1)
 */

/* console.log(token); */

const tableData = ref([{
    practicalId: '',
    classId: "",
    className: "",
    adviserId: '',
    adviserName: "",
    teachId: '',
    teachName: "",
    practicalType: '',
    onloadDate: "",
    courseSchema: '',
    planId: '',
    courseId: '',
    courseName: "",
    startDate: '',
    majorName: "",
    enrolDate: "",
}])

onBeforeMount(() => {

    //请求学生信息
    const aacom = requests({ url: "/excel/allTrainPlanVo", method: "get", }).then(res => {
        //存储信息到浏览器toke
        const abc = res.rdata
        tableData.value = abc
        console.log(res)
    })
        .catch(err => {
            console.error(err.data);
            // 登录请求失败后的操作
        });
})




function uploadFileHandler(res) {
    setTimeout(() => {
        if (loadingInstance.value !== null) {
            loadingInstance.value.close();
            loadingInstance.value = null;
        }
        if (res.code == 20010) {
            ElMessage.error(res.msg)
        } else {
            ElMessage.success(res.msg)
        }

    }, 1000);
}
function uploadFileErrorHandler(res) {
    ElMessage.error("上传失败,请检查网络连接")
    if (loadingInstance.value !== null) {
            loadingInstance.value.close();
            loadingInstance.value = null;
        }
}

const loadingInstance = ref(null);

function fullScreenLoading() {
    loadingInstance.value = ElLoading.service({
        lock: true,
        text: '文件上传中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
    });

}
function uploadFileOnProgressHandler(res) {
    // this.$message("上传中...")
    fullScreenLoading()
}



//时间格式化
function formatDate(row, column, cellValue, index) {
    let format = 'YYYY-mm-dd'
    let date = new Date(cellValue);
    const dataItem = {
        'Y+': date.getFullYear().toString(),
        'm+': (date.getMonth() + 1).toString(),
        'd+': date.getDate().toString(),
    }
    Object.keys(dataItem).forEach((item) => {
        const ret = new RegExp(`(${item})`).exec(format);
        if (ret) {
            format = format.replace(ret[1], ret[1].length === 1 ? dataItem[item] : dataItem[item].padStart(ret[1].length, '0'));
        }
    });
    return format
}
</script>

<style>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>
